<template>
  <div>
    <div class="shebeiliebiao">
      <con-title :topTitle="topTitle"></con-title>
    </div>
    <el-card class="box-card">
      <div class="clearfix">
        <el-form label-width="100px" :inline="true">
          <el-form-item label="群组名称:">
            <el-input
              v-model.trim="query.keyword"
              class="input-width"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchFun"
              >搜索</el-button
            ></el-form-item
          >
        </el-form>
        <el-button type="primary" class="addbtn" @click="handleAdd"
          >新增群组</el-button
        >
      </div>
    </el-card>
    <template>
      <el-table
        :data="GroupLeaderList"
        style="width: 98.8%"
        class="gateway-table"
      >
        >
        <el-table-column
          type="index"
          label=""
          width="100"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="groupName"
          label="群组名称"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="nodeNums"
          label="传感器节点数量"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="onlineNums" label="在线设备数量" align="center">
        </el-table-column>
        <el-table-column prop="cTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <!-- #default="scope" -->
          <template #default="scope">
            <!--  @click="showDialog(scope.row.id, scope.row.groupName)" -->
            <el-button
              type="text"
              size="small"
              @click="showDialog(scope.row.id, scope.row.groupName)"
              >重命名</el-button
            >
            <!-- @click="delGroup(scope.row.id)"  -->
            <el-button type="text" size="small" @click="delGroup(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-pagination
      class="fenye"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="query.currpage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="query.pageSize"
      layout="sizes, prev, pager, next,jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 弹窗 -->
    <el-dialog
      :title="editId == '' ? '添加群组信息' : '修改群组信息'"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="群组名称" prop="groupName">
          <el-input
            type="input"
            v-model="ruleForm.groupName"
            placeholder="请输入群组名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleOK">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $GroupLeaderList } from "@/api/index";
import { $groupAdd, $groupEdit, $groupDel } from "@/api/index";
export default {
  name: "GroupLeader",
  data() {
    return {
      GroupLeaderList: [],
      topTitle: {
        type: "设备",
        text: "节点群主",
        msg: "以分组的形式管理节电设备，提供了搜索、添加了新的群组、重命名、移动设备等功能。",
      },
      total: 0,
      editId: "",
      query: {
        currPage: 1,
        pageSize: 5,
        keyword: "",
      },
      dialogVisible: false, //弹窗是否显示
      ruleForm: {
        groupName: "",
      }, //需要提交的表单项
      rules: {
        groupName: [
          { required: true, message: "请输入群组名称", trigger: "blur" },
        ],
      }, //需要验证的表单项
    };
  },
  mounted() {
    $GroupLeaderList().then((res) => {
      console.log(res);
      this.GroupLeaderList = res.data.data;
    });
    this.getGroupLeaderList();
  },
  methods: {
    getGroupLeaderList() {
      $GroupLeaderList(this.query).then((res) => {
        console.log(res);
        this.GroupLeaderList = res.data.data;
        this.total = res.data.total;
      });
    },

    handleSizeChange(count) {
      this.query.pageSize = count;
      this.query.currPage = 1;
      this.getGroupLeaderList();
    },
    handleCurrentChange(page) {
      this.query.currPage = page;
      this.getGroupLeaderList();
    },
    searchFun() {
      this.getGroupLeaderList();
    },
    // 点击 弹窗的确定按钮触发的函数
    handleOK() {
      console.log("弹窗需要关闭，添加一条记录");
      //验证 表单的input框是否添加了数据
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          console.log("验证成功");
          if (this.editId !== "") {
            //修改
            this.editItem();
          } else {
            //添加
            this.addItem();
          }
        } else {
          console.log("error");
          return false;
        }
      });
    },
    //添加
    addItem() {
      //2.调用添加接口
      $groupAdd({ groupName: this.ruleForm.groupName }).then((res) => {
        console.log(res);
        if (res.data.msg == "success") {
          //成功添加
          //1.关闭弹窗
          this.dialogVisible = false;
          this.getGroupLeaderList();
        }
      });
    },
    handleAdd() {
      this.dialogVisible = true;
      this.editId = "";
      this.ruleForm.groupName = "";
    },
    editItem() {
      $groupEdit({ id: this.editId, groupName: this.ruleForm.groupName }).then(
        (res) => {
          console.log(res);
          if (res.data.msg == "success") {
            //成功添加
            //1.关闭弹窗
            this.dialogVisible = false;
            this.getGroupLeaderList();
          }
        }
      );
    },
    //显示一下修改页面
    showDialog(id, groupName) {
      this.dialogVisible = true;
      //给文本框赋值
      this.ruleForm.groupName = groupName;
      this.editId = id;
    },

    //删除
    delGroup(id) {
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $groupDel({ id: id }).then((res) => {
            console.log(res);
            if (res.data.msg == "success") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              //重新获取数据
              this.getGroupLeaderList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  components: {
    ConTitle,
  },
};
</script>

<style lang="scss" scoped>
.shebeiliebiao {
  margin-top: 10px;
  width: 100%;
}
.gateway-table {
  margin-left: 10px;
}
.fenye {
  margin-top: 40px;
  text-align: center;
}
.caozuo {
  color: #409eff;
}
.box-card {
  width: 98.7%;
  position: relative;
  margin-left: 10px;
  margin-bottom: 10px;
}
.addbtn {
  position: absolute;
  top: 20px;
  right: 10px;
}
</style>